<script setup lang="ts">
// 中间标题
// @Prop title: string = ''
const { title = '-' } = defineProps<{
  title?: string
}>()

// 点击左侧图标回调
// leftClickHandler: (title: string) => void = () => { }
const emits = defineEmits<{
  'leftClickHandler': [title: string]
}>()
</script>

<template>
  <div class="navbar">
    <button @click="emits('leftClickHandler', title)">左按钮</button>
    <h3>{{ title }}</h3>
    <!-- slot 插槽 - 接收传递过来的结构 -->
    <slot>
      <!-- 插槽可设置默认内容 -->
      <button>右边按钮</button>
    </slot>
  </div>
</template>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: pink;
}
</style>